<template>
  <div>
    <header>
      <div>
        <i class="iconfont icon-search" @click="search"></i>
        <input type="text" placeholder="按内容搜索" />
      </div>
    </header>
    <div class="content1">
      <ul class="side">
        <li v-for="item in arrleft" :key="item.id">{{item.catename}}</li>
      </ul>
      <div class="content2">
        <ul v-for="(item,index) in arrleft" :key="item.id">
          <li>{{item.catename}}</li>
          <li>
            <div v-for="i in arrleft[index].children" :key="i.id" @click="golist(i.id)">
              <img :src="$pre+i.img" alt />
              <p>{{i.catename}}</p>
            </div>
            <div v-if="!arrleft[index].children">暂无数据</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCate } from "../../../http/api.js";
export default {
  data() {
    return {
      arrleft: []
    };
  },
  methods: {
    search() {
      this.$router.push("/foodSearch");
    },
    golist(id) {
      this.$router.push("/foodList?id=" + id);
    }
  },
  mounted() {
    reqCate().then(res => {
      this.arrleft = res.data.list;
    });
  }
};
</script>

<style scoped>
header {
  height: 1.14rem;
  background: linear-gradient(to bottom, #ff6040, #ff897e);
  display: flex;
  justify-content: center;
  align-items: center;
}
header div {
  width: 7.1rem;
  height: 0.64rem;
  background: white;
  border-radius: 0.1rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
header div i {
  height: 0.64rem;
  width: 0.6rem;
  font-size: 0.5rem;
  line-height: 0.64rem;
  text-align: center;
}
.content1 {
  display: flex;
  justify-content: space-between;
  background: #f2f2f2;
}
.content1 .side {
  display: flex;
  flex-direction: column;
  background: white;
}
.content1 .side li {
  height: 0.9rem;
  width: 2.36rem;
  font-size: 0.24rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: gray;
}
.content1 .side li:hover {
  font-size: 0.3rem;
  font-weight: bolder;
  color: #ff8b73;
}
.content1 .content2 {
  width: scal(97.64%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.content1 .content2 ul {
  width: 4.64rem;
  background: white;
  margin-top: 0.3rem;
}
.content1 .content2 ul li:nth-of-type(1) {
  font-size: 0.3rem;
  font-weight: bolder;
  line-height: 0.7rem;
  text-indent: 0.13rem;
}
.content1 .content2 ul li:nth-of-type(2) {
  display: flex;
  flex-wrap: wrap;
}
.content1 .content2 ul li:nth-of-type(2) img {
  width: 1.28rem;
  height: 1.28rem;
}
.content1 .content2 ul li:nth-of-type(2) p {
  font-size: 0.2rem;
  color: gray;
  line-height: 0.54rem;
  text-align: center;
}
.content1 .content2 ul:nth-of-type(1) li:nth-of-type(2) div {
  margin: 0 0.13rem;
}
</style>